<template>
  <el-form-item label="所在地区">
    <el-cascader
      :options="areaOption"
      v-model="selectOption"
      @active-item-change="handleItemChange"
      :props="props"
      @change="handleChange" style="width:100%">
    </el-cascader>

  </el-form-item>
</template>
<script>
// import _ from 'lodash'
export default {
  props: {
    areaOption: Array,
    value: Array
  },
  created() {
    this.selectOption = this.value;
  },
  mounted() {},
  data() {
    return {
      props: {
        value: "code",
        label: "name"
      },
      selectOption: []
    };
  },
  watch: {
    value(val) {
      this.selectOption = val;
    },
    selectOption(val) {
      this.$emit("input", val);
    }
  },
  computed: {},
  methods: {
    handleChange(val) {
      console.log("地址选择", val);
      this.$emit("areaChanged", val);
    },
    handleItemChange(val) {
      // _.forEach(val, (code)=>{
      //   console.log(code)
      // })
      // let ret = _.find(this.areaOption,{code: val[0]})
      // console.log(this.areaOption, ret)
      // this.$branch.dispatch('getAreas', {code: val[0]}).then(ret => {
      //   console.log(ret)
      // })
    }
  },
  components: {}
};
</script>
<style>
</style>
